﻿<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>骨医快线</title>
    <link rel="stylesheet" href="../../css/mui.plus.css" />
    <style>
    	.mui-radio input[type="radio"]:before, .mui-checkbox input[type="checkbox"]:before {
    		font-size: 20px;
    	}
    	.pat-scale.mui-navigate-right:after {
        	content: '\e468';
        	font-size: 30px;
        	color: #30B497;
        	font-weight: bold;
        }
    </style>
</head>
<body>

    <header class="mui-bar mui-bar-nav pri-bar">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">添加术后随访</h1>
    </header>
    <footer class="mui-bar mui-bar-footer" style="padding: 0;height: 50px;">
        <button type="button" id="btnSave" class="mui-btn mui-btn-primary mui-btn-block" style="padding:10px 0;">确认邀请</button>
    </footer>
    <div class="mui-content oe-helper">
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <span>姓名</span>
                <span class="mui-pull-right" data-name="rec_name">加载中...</span>
            </li>
            <li class="mui-table-view-cell">
                <span>手术名称</span>
                <span class="mui-pull-right" data-name="rec_surgery_name">加载中...</span>
            </li>
            <li class="mui-table-view-cell">
                <span>手术时间</span>
                <span class="mui-pull-right" data-name="rec_surgery_date">加载中...</span>
            </li>
            <li class="mui-table-view-cell">
                <span>诊断</span>
                <span class="mui-pull-right" data-name="rec_diagnosis" style="max-width: 70%;">加载中...</span>
            </li>
        </ul>
        <form action="" class="mui-input-group">
            <div class="mui-input-row">
                <label>复查内容</label>
                <input type="text" placeholder="请填写" id="txtContent" class="oe-tar" />
            </div>
            <div class="mui-input-row" style="height:auto;">
                <div style="padding: 15px 11px;">复查节点(勾选复查节点，术后n个月)</div>
                <ul class="mui-table-view mui-grid-view" style="padding: 15px 11px;">
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        1
                        <input value="1" type="checkbox" checked>
                    </li>
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        2
                        <input value="2" type="checkbox">
                    </li>
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        3
                        <input value="3" type="checkbox" checked>
                    </li>
                    <li id="test" class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        4
                        <input value="4" type="checkbox">
                    </li>
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        5
                        <input value="5" type="checkbox">
                    </li>
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        6
                        <input value="6" type="checkbox" checked>
                    </li>
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        7
                        <input value="7" type="checkbox">
                    </li>
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        8
                        <input value="8" type="checkbox">
                    </li>
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        9
                        <input value="9" type="checkbox">
                    </li>
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        10
                        <input value="10" type="checkbox">
                    </li>
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        11
                        <input value="11" type="checkbox">
                    </li>
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        12
                        <input value="12" type="checkbox" checked>
                    </li>
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        13
                        <input value="13" type="checkbox">
                    </li>
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        14
                        <input value="14" type="checkbox">
                    </li>
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        15
                        <input value="15" type="checkbox">
                    </li>
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        16
                        <input value="16" type="checkbox">
                    </li>
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        17
                        <input value="17" type="checkbox">
                    </li>
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        18
                        <input value="18" type="checkbox">
                    </li>
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        19
                        <input value="19" type="checkbox">
                    </li>
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        20
                        <input value="20" type="checkbox">
                    </li>
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        21
                        <input value="21" type="checkbox">
                    </li>
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        22
                        <input value="22" type="checkbox">
                    </li>
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        23
                        <input value="23" type="checkbox">
                    </li>
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        24
                        <input value="24" type="checkbox">
                    </li>
                </ul>
            </div>
	        
	        <div class="oe-divide-block"></div>
            
            <ul class="mui-table-view">
		        <li id="btn-scale" class="mui-table-view-cell" data-page="../scale/home.html">
		            <a class="mui-navigate-right pat-scale">
						添加量表
		            </a>
		        </li>
		    </ul>
		    
		    <ul id="list-scale" class="mui-table-view">
		    </ul>
		    <script id="tmp-scale" type="text/html">
		    	{{each scales as v i}}
					<li class="mui-table-view-cell mui-transitioning" data-rsid = "{{v.fr_rs_id}}" data-rsname = "{{v.fr_name}}" data-node = "{{v.fr_point}}">
						<div class="mui-slider-right mui-disabled">
							<a class="mui-btn mui-btn-red" data-index="{{i}}" style="transform: translate(0px, 0px);">删除</a>
						</div>
						<div class="mui-slider-handle" style="transform: translate(0px, 0px);">
							{{v.fr_name}}
						</div>
					</li>
				{{/each}}
		    </script>
            
	        <div class="oe-divide-block"></div>
            
            <div class="mui-input-row">
                <label style="position: absolute;width: auto;">患者手机号</label>
                <input type="number" id="txtPhoto" placeholder="请填写" class="oe-tar" maxlength="11"/>
            </div>
        </form>
        
        
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <span>随访快码</span>
                <span class="mui-pull-right" id="spanCode"></span>
            </li>
            <li class="mui-table-view-cell">
                <span>短信内容</span>
                <span class="mui-pull-right" id="spanMsg"></span>
            </li>
        </ul>
    </div>

    <script src="../../js/mui.min.js"></script>
    <script src="../../js/app.js"></script>
    <script src="../../js/lib/template.js"></script>
    
    <script>
        (function ($, doc) {
            var wv,
            	obj = null,
            	tmpData = {scales:[]},
            	dataToScale = {module: 'FO', branch: 'ADD'}; // 传往量表首页的数据;
            
             $('.mui-content').on('tap', '#btn-scale', function(){
            	var self = this;
            	
            	$.openWindow({
            		url: this.dataset.page,
            		waiting: {
            			autoShow: false
            		},
            		extras: {
            			dataFromOpener: dataToScale
            		}
            	});
            });
            
            window.addEventListener('updateScaleList',function(e){
            	tmpData.scales.push(e.detail);
            	var html = template('tmp-scale', tmpData);
            	document.getElementById("list-scale").innerHTML = html;
            })
            
             $('#list-scale').on('tap', '.mui-btn-red', function(){
            	var self = this;
            	var li = self.parentNode.parentNode;
            	$.confirm('确定删除这张量表', ' 骨医快线', ['确定', '取消'], function(e){
            		if(e.index === 0){
            			tmpData.scales.splice(self.dataset.index, 1)
            			li.parentNode.removeChild(li);
            		}else {
            			setTimeout(function() {
							$.swipeoutClose(li);
						}, 0);
            		}
            	})
            })
            
            $.plusReady(function () {
            	wv = plus.webview.currentWebview()
                obj = wv.obj;
            	dataToScale.startPageId = plus.webview.currentWebview().id;
            	
            	// 更改返回逻辑
            	$.back = function(){
            		$.openWindow({
            			id: 'main'
            		});
            		wv.close('slide-out-left');
            	}
            	
                var txtPhotp = document.getElementById("txtPhoto");
                var spanCode = document.getElementById("spanCode");
                var txtContent = document.getElementById("txtContent");

                var lis = document.querySelectorAll(".mui-table-view-cell");
                for (var i = 0; i < lis.length; i++) {
                    var cur = lis[i];
                    var span = cur.querySelector(".mui-pull-right");
                    if (span) {
                        if (span.getAttribute("data-name")) {
                            span.textContent = obj[span.getAttribute("data-name")];
                        }
                    }
                }
                if(obj.rec_phone){
                	txtPhotp.value = obj.rec_phone;
                	if (/^1[3|4|5|7|8]\d{9}$/.test(obj.rec_phone)) {
                        app.page.getInterCode(function (data) {
                            spanCode.textContent = data.fast_code;
                            document.getElementById("spanMsg").textContent = data.sms_text;
                        });
                    }
                }

                txtPhotp.addEventListener("keyup", function () {
                    if (this.value && this.value.length == 11) {
                        if (/^1[3|4|5|7|8]\d{9}$/.test(this.value)) {
                            app.page.getInterCode(function (data) {
                                spanCode.textContent = data.fast_code;
                                document.getElementById("spanMsg").textContent = data.sms_text;
                            });
                        }
                    }
                });

                document.getElementById("btnSave").addEventListener("tap", function () {
                    var checkedBoxs = document.querySelectorAll(".mui-grid-view :checked");
                    var checkedArray = [];
                    for (var i = 0; i < checkedBoxs.length; i++) {
                        checkedArray.push(checkedBoxs[i].value);
                    }
                    var postData = {
                        fo_dr_id: app.storage.getUserId(),
                        fo_rec_id: obj.rec_id,
                        fo_patient_mobile: txtPhotp.value,
                        fo_fast_code: spanCode.textContent,
                        fo_review_content: txtContent.value
                    }; 
                    postData.fo_review_point = checkedArray.join();
                    if (!postData.fo_review_point) {
                        plus.nativeUI.toast("请选择复查节点!");
                        return false;
                    }
                    if (!postData.fo_patient_mobile) {
                        plus.nativeUI.toast("请输入患者手机号码!");
                        return false;
                    }
                    if (!postData.fo_review_content) {
                        plus.nativeUI.toast("请输入复查内容!");
                        return false;
                    }
	                if(tmpData.scales.length > 0)postData.fo_review_rs = tmpData.scales;
                    app.page.addInterview(postData, function () {
                        $.alert('已发送邀请短信至患者手机\n请等待患者接受并绑定', '骨医快线', function() {
                        	var mainPage = plus.webview.getWebviewById('main');
                        	var pages = plus.webview.all();
                        	for(var i in pages){
                        		$.fire(pages[i],'start',null);
                        	}
                        	$.fire(mainPage, 'toThird', null);
							$.openWindow({id: 'main'});
						});
                    });
                });
            });
        }(mui, document)); 
    </script>
</body>
</html>